<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>computed Option 计算选项</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
	<h1>computed Option 计算选项</h1>
	<hr>
	<div id="app">
		{{d}}
		<button @click="add(2)">ADD</button>
		<!-- 调用构造器的原始方法 -->
		<btn @click.native="add(2)"></btn>
	</div>
	<!-- 外部调用 -->
    <button onclick="app.add(3)">ADD</button>

</body>
<script type="text/javascript">
var btn={
	template:`<button>ADD组件</button>`
}

var app = new Vue({
	el:'#app',
	data:{
		d:2	
	},
	components:{
		'btn':btn
	},
	methods:{
		add:function (num) {
			if (num!='') {
				this.d+=num;
			}else{
				this.d++;
			}
		}
	}
})

</script>
</html>